import { useEffect, useMemo, useState } from "react";
import "./style.css";
import leftUnSelect from "../../assets/smallTab/left-unselect-tab.png";
import rightUnselect from "../../assets/smallTab/right-unselect-tab.png";
import leftSelect from "../../assets/smallTab/left-select-tab.png";
import rightSelect from "../../assets/smallTab/right-select-tab.png";
import DemoPie from "../Chart/pieChart";
import { diva } from "../../global";

// 图例+切换
const SmallSwitchTabAndPie = ({
  middleName,
  tab,
  data,
  color,
  index,
//   pieData3,
//   pieColor3,
//   pieDataFirst,
//   pieLegendData3,
//   pieLegendData4,
//   pieColor4,
//   pieData4,
//   pieLegendDataFirst,
//   pieDataSecond,
//   pieLengendDataSecond,
//   pieFirstColor,
//   pieSecondColor,
//   setMiddleIndex,
}) => {
  const [selectIndex, setSelectIndex] = useState(0);
  const [count, setCount] = useState(1);
  const [pieSecondis, setPieSecond] = useState(0);
//   const [pieName, setPieName] = useState(tab[0]);
  const pieNameName = ["种植区", "权属", "种植状态", "认养状态"];
  const [thisis, setThisis] = useState(0);
 
  const nameChange = (val) => {
    if (
      val !== "铜鼓镇" &&
      val !== "南腰界镇" &&
      val !== "花田乡" &&
      val !== "涂市镇" &&
      val !== "李溪镇" &&
      val !== "123"
    ) {
      return;
    }
    setSelectIndex(val === "123" ? 0 : 1);
  };
  // useEffect(()=>{
  //     setCount(count+1)
  //         },[])
  const pieFirst = useMemo(() => {
    return (
      <DemoPie
        // middleNameChange={nameChange}
        // index={selectIndex}
        data={data}
        // title={pieName}
        pieIndex={index}
        color={color}
        // lengendData={thisis === 0 ? pieLegendDataFirst : pieLengendDataSecond}
      />
    );

    // },[middleName,thisis, count===true]);
  });

//   useEffect(() => {
//     if (!middleName) {
//       setSelectIndex(0);
//       setThisis(0);
//       setPieSecond(4);
//     }
//     if (middleName) {
//       setSelectIndex(middleName === "123" || middleName === "1" ? 0 : 1);
//       setThisis(middleName === "123" ? 0 : 1);
//     //   setPieName(middleName === "123" ? "种植区" : "权属");
//     }
//   }, [middleName]);


  return (
    <div>
      {/* <div className="small-container">
        <div
          className="left-smallTab"
          onClick={() => {
            setSelectIndex(0);
            setThisis(0);
            setPieName(pieNameName[0]);
            midddleName("");
          }}
          style={{
            color: selectIndex === 0 ? "#fff" : "#9EBBCB",
            backgroundImage:
              selectIndex === 0 ? `url(${leftSelect})` : `url(${leftUnSelect})`,
          }}
        >
          {pieNameName[0]}
        </div>
        <div
          className="right-smallTab"
          style={{
            color: selectIndex === 1 ? "#fff" : "#9EBBCB",
            backgroundImage:
              selectIndex === 1
                ? `url(${rightSelect})`
                : `url(${rightUnselect})`,
          }}
          onClick={() => {
            setSelectIndex(1);
            setThisis(1);
            setPieName(pieNameName[1]);
          }}
        >
          {pieNameName[1]}
        </div>
      </div> */}
      {pieFirst}
    </div>
  );
};
export default SmallSwitchTabAndPie;
